<template>
  <div>
    <Card shadow>
      <div style="margin:0 30px 20px 0">
        <Button type="primary" @click="openModal()">添加客房</Button>&ensp;
        <Button type="error">批量删除</Button>&ensp;
        <Button type="info">批量导入</Button>&ensp;
        <Button type="success">导出为Csv文件</Button>
        <span style="float: right;clear:both;color: #2d8cf0">
      <i-switch v-model="showTable" size="large"/>
          {{ showTable ? "表格模式" : "列表模式" }}
      </span>
      </div>
      <div class="search-con search-con-top">
        <Select v-model="searchKey" class="search-col">
          <Option v-for="item in roomTableColumn" v-if="item.key !== 'handle' &&item.search!==false" :value="item.key"
                  :key="`search-col-${item.key}`">{{ item.title }}
          </Option>
        </Select>
        <Input clearable placeholder="输入关键字搜索" class="search-input"/>
        <Button class="search-btn" type="primary">
          <Icon type="search"/>&nbsp;&nbsp;搜索
        </Button>
      </div>
      <div style="margin-left: auto;margin-right: auto;text-align: center " v-if="!showTable">

        <HouseItem v-for="i in roomData" :key="i.id" :views="i.views"
                   :room-code="i.roomCode"
                   :daily-rent="i.dailyRent"
                   :img-list="i.imgList"
                   :into-count="i.intoCount"
                   :status="getStatus(i.status)"
        ></HouseItem>
      </div>
      <div v-if="showTable" style="height: 550px">
        <Table
          :columns="roomTableColumn" :data="roomData" height="540"
        >

        </Table>
      </div>
      <div style="text-align: right;margin-top: 10px">
        <Page :total="dataSize"
              :page-size="pageSize"
              :current="pageIndex"
              @on-change="changePage"
              @on-page-size-change="changeSize"
              show-total
              show-elevator
              show-sizer/>
      </div>
      <AddRoom ref="roomModal" @refresh="getData()"></AddRoom>
    </Card>
  </div>
  <!-- <div>-->
  <!--   <header>房源管理</header>-->
  <!--   -->
  <!-- </div>-->
</template>

<script>
import {getAllRoomByPageAndSize,getImgUrl} from "@/api/data";
import HouseItem from "@/view/admin/room/HouseItem";
import AddRoom from "@/view/admin/room/AddRoom";
import {forEach, getStatus} from "@/libs/tools";
export default {
  name: "list",
  data() {
    return {
      searchKey: '',
      showTable: false,
      loading: true,
      pageIndex: 1,
      pageSize: 10,
      dataSize: 0,
      data: [],
      getImgUrl:getImgUrl,
      getStatus:getStatus,
      roomData: [],
      roomColumns: [],
      roomTableColumn: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          search: false
        },
        {
          title: '房间号', key: 'roomCode', sortable: true, minWidth: 80, width: 100
        },
        {
          title: '房间类型', key: 'roomType', sortable: true,
          render: (h, params) => {
            console.log(params)
            return h('span', params.row.roomType.typeName)
          }

        },
        {
          title: '时租费用', key: 'hourlyRate', sortable: true
        },
        {
          title: '日租费用', key: 'dailyRent', sortable: true
        },
        {
          title: '活动折扣', key: 'activityDiscount', sortable: true
        },
        {
          title: '查看人数', key: 'views', sortable: true
        },
        {
          title: '租赁人数', key: 'intoCount', sortable: true
        },
        {
          title: '状态', key: 'status', sortable: true,
          tooltip: true,
          resizable: true,
          render: (h, params) => {
            const row = this.getStatus(params.row.status);
            return h('Tag', {
              props: {
                //type: 'dot',
                color: row.color
              }
            }, row.value);
          }
        },
        {
          title: '操作', key: 'handle', sortable: false,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.updateData(params)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: params.row.status.toUpperCase()==='DELETE'?'warning':'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deleteData(params)
                  }
                }
              }, params.row.status.toUpperCase()==='DELETE'?'恢复':'删除')
            ]);
          }
        }
      ]
    }
  },
  components: {
    HouseItem,
    AddRoom,
  },
  methods: {
    changePage(page) {
      this.pageIndex = page;
      this.getData();
    },
    changeSize(size) {
      this.pageSize = size;
      this.getData();
    },
    updateData(o){

    },
    deleteData(o){

    },
    getData() {
      this.loading = true
      getAllRoomByPageAndSize(this.pageIndex, this.pageSize).then(data => {
        if (data.data.code !== 200 || !data.data.object.content) {
          this.$Message.error(data.data.message);
        } else {
          this.data = data.data.object.content;
          this.data.forEach(o =>{
            o.imgList.forEach(p=>{
              getImgUrl(p).then(t=>{
                if (t.data.code==200){
                  p.src = t.data.object;
                }else{
                  p.src = "https://glkj.top/static/logo.png";
                }
              })
            })
          })
          console.log(this.data)
          this.roomData = this.data;
          this.roomColumns = this.data;

          this.dataSize = data.data.object.totalElements;
        }
        this.loading = false
      });
    },
    openModal() {
      this.$refs.roomModal.openModal();
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>

</style>
